<template>
  <div class="projectWrapper">
    <hry-header :title="isSearch ? '搜索结果' : '我的好友'" :showBackBtn="true">
      <div slot="action" v-if="!isSearch">
        <a-icon type="search" @click="goSearch()" />
      </div>
      <div slot="content" class="personProject">
        <div class="form-wrapper">
          <md-scroll-view
            ref="scrollView"
            :scrolling-x="false"
            :auto-reflow="true"
            @endReached="$_onEndReached"
            @refreshing="changeTab"
          >
            <div class="empty" v-if="data.length === 0">
              <img src="@/assets/img/empty.png" alt="" />
            </div>
            <md-scroll-view-refresh
              slot="refresh"
              slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
              :scroll-top="scrollTop"
              :is-refreshing="isRefreshing"
              roller-color="#FD7400"
              :is-refresh-active="isRefreshActive"
            ></md-scroll-view-refresh>
            <hry-project
              v-for="(item, index) in data"
              :key="index"
              :info="item"
            ></hry-project>
            <md-scroll-view-more slot="more" :is-finished="isFinished">
            </md-scroll-view-more>
          </md-scroll-view>
        </div>
      </div>
    </hry-header>
  </div>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
import {
  ScrollView,
  ScrollViewMore,
  TabBar,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "index",
  components: {
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [TabBar.name]: TabBar,
    hryHeader: () => import("@/components/contentWrapper/index"),
    hryProject: () => import("@/components/person/friendsCard")
  },
  data() {
    return {
      isSearch: false,
      isFinished: false,
      info: {
        curpage: 1
      },
      totalPage: 1,
      data: []
    };
  },
  methods: {
    goSearch() {
      this.$store.dispatch("changeSearchPageRouter", "personFriends");
      this.$commonJs.goPage("personSearch");
    },
    changeTab() {
      this.$nextTick(() => {
        this.info.curpage = 1;
        this.isFinished = false;
        this.getList(true);
      });
    },
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.info.curpage++;
      this.getList();
    },
    getList(refresh) {
      let obj = this.isSearch
        ? { keywords: this.$route.query.info, curpage: this.info.curpage }
        : this.info;
      this.$ajax
        .post(this.$api.inviteList, obj)
        .then(res => {
          if (refresh) {
            this.data = res.data;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data);
          }
          this.totalPage = res.total_page;
          if (this.info.curpage === this.totalPage || this.totalPage === 0) {
            this.isFinished = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  created() {
    let query = this.$route.query.info;
    if (query) {
      this.isSearch = true;
    }
    this.getList(true);
  }
};
</script>

<style scoped lang="less">
.projectWrapper {
  height: 100%;
  width: 100%;
  .personProject {
    height: 100%;
    .form-wrapper {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
